<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 实现</title>
    <link rel="stylesheet" href="./site2.css">
</head>
<body>
    <div class="content">
        <div>
            <h1>练习（1）</h1>
            <div class="div-bg-gray"></div>
            <hr>
            <div class="div-bg-gray"></div>
            <hr>
            <div class="div-bg-gray"></div>
            <hr>
            <div class="div-bg-gray"></div>
            <hr>
            <div class="div-bg-gray"></div>
            <hr>
            <div class="div-bg-gray"></div>
            <hr>
        </div>
        <br>
        <br>
        <br>
        <h1>练习（2）</h1>
        <div class="border direction-row">
            <div class="div-block"></div>
            <div class="div-block"></div>
            <div class="div-block"></div>
        </div>
        <br>
        <br>
        <br>
        <h1>练习（3）</h1>
        <div class="lianxi-3-border direction-row">
            <div class="div-block-2">
                <div class="img"><img src="./images/翱翔天际.jpg" alt="翱翔天际" width="100px" height="100px"></div>
                <div class="text-center">翱翔天际</div>
            </div>
            <div class="div-block-2">
                <div class="img"><img src="./images/绿草茵茵.jpg" alt="绿草茵茵" width="100px" height="100px"></div>
                <div class="text-center">绿草茵茵</div>

            </div>
            <div class="div-block-2">
                <div class="img"><img src="./images/蓝天白云.jpg" alt="蓝天白云" width="100px" height="100px"></div>
                <div class="text-center">蓝天白云</div>
            </div>
            <div class="div-block-2">
                <div class="img"><img src="./images/鲜花盛开.jpg" alt="鲜花盛开" width="100px" height="100px"></div>
                <div class="text-center">鲜花盛开</div>
            </div>
        </div>


    </div>
</body>
</html>